var vm = new Vue({
    el: "#app",
    delimiters: ['[[',']]'],
    data: {
        host:host,

        username:'dlk001hhh',
        error_name:false,
        error_name_message:'',

        password:'',
        error_password:false,
        error_password_message:'',

        password2:'',
        error_password2:false,
        error_password2_message:'',

        phoneNumber:'',
        error_phoneNumber:false,
        error_phoneNumber_message:'',

        allow:true,
        error_allow:false,
        error_allow_message:'',

        img:'',
        img_url:'',
        error_img:false,
        error_img_message:'',
        uuid:'',

        msg:'',
        error_msg:false,
        error_msg_message:'',
        sending_flag:false,

        url_sms:''
    },
    mounted: function () {
        this.click_img();
    },
    methods: {
        check_username: function () {
            var re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)){
                this.error_name = false;
            }else {
                this.error_name = true;
                this.error_name_message = '请输入5到20个字符';
            }

            if (this.error_name == false){
                let url = '/users' + '/username/' + this.username;
                axios.get(url).then(response=>{
                    data = response.data;
                    if (data.count == 0){
                        this.error_name = false
                    }else{
                        this.error_name = true;
                        this.error_name_message = '用户名重复'
                    }
                }).catch(error=>{
                    console.log(error)
                });
            }

        },
        check_password: function () {
            var re = /^[a-zA-Z0-9]{8,20}$/;
            if (re.test(this.password)){
                this.error_password = false;
            }else{
                this.error_password = true;
                this.error_password_message = '请输入8到20个字符'
            }
        },
        check_password2: function () {
            if (this.password2 == this.password){
                this.error_password2 = false;
            }else{
                this.error_password2 = true;
                this.error_password2_message = '两次输入的密码不一致'
            }
        },
        check_phoneNumber: function () {
            var re = /^1[3-8]\d{9}$/;
            if (re.test(this.phoneNumber)){
                this.error_phoneNumber = false;
            }else{
                this.error_phoneNumber = true;
                this.error_phoneNumber_message = '手机号格式不对';
            }
        },
        check_allow: function () {
            if (!this.allow){
                this.error_allow = true;
            }else{
                this.error_allow = false;
            }
        },
        check_img: function () {
            if (!this.img){
                this.error_img = true;
                this.error_img_message = '验证码不能为空'
            }else{
                this.error_img = false;
            }
        },
        generateUUID: function () {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        },
        click_img: function () {
            this.uuid = this.generateUUID();
            this.img_url = this.host + '/verifications' + '/img/' + this.uuid +'/';
            console.log(this.img_url)
        },
        check_msg: function () {
            if (!this.msg){
                this.error_msg = true;
                this.error_msg_message = "验证码不能为空"
            }else{
                this.error_msg = false;
            }
        },
        click_msg: function () {
            if (this.sending_flag == true) {
                return;
            }
            this.sending_flag = true;

            this.check_phoneNumber();
            this.check_img();

            if (this.error_phoneNumber == true || this.error_img == true) {
                this.sending_flag = false;
                return;
            }

            var url = this.host + '/verifications/sms/' + '?mobile=' + this.phoneNumber + '&image_code_id=' + this.uuid + '&image_code=' + this.img;
			axios.get(url, {
                responseType: 'json'
            })
                .then(response => {
                    // 表示后端发送短信成功
                    if (response.data.code == '0') {
                        // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                        var num = 60;
                        // 设置一个计时器
                        var t = setInterval(() => {
                            if (num == 1) {
                                // 如果计时器到最后, 清除计时器对象
                                clearInterval(t);
                                // 将点击获取验证码的按钮展示的文本回复成原始文本
                                this.sms_code_tip = '获取短信验证码';
                                // 将点击按钮的onclick事件函数恢复回去
                                this.sending_flag = false;
                            } else {
                                num -= 1;
                                // 展示倒计时信息
                                this.sms_code_tip = num + '秒';
                            }
                        }, 1000, 60)
                    } else {
                        if (response.data.code == '4001') {
                            this.error_image_code_message = response.data.errmsg;
                            this.error_image_code = true;
                        } else { // 4002
                            this.error_sms_code_message = response.data.errmsg;
                            this.error_sms_code = true;
                        }
                        this.generate_image_code();
                        this.sending_flag = false;
                    }
                })
                .catch(error => {
                    console.log(error.response);
                    this.sending_flag = false;
                })
        },
        on_submit: function () {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_phoneNumber();
            this.check_allow();
            if (this.error_username==true || this.error_password==true || this.error_password2==true || this.error_allow==true || this.error_phoneNumber==true){
                // 如果不符合条件，禁用表单
                window.event.returnValue = false;
            }
        },
    },
});
